<template>

  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo2.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link active" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo2.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>发布岗位</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>

          <li class="active">发布岗位</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <section class="candidates-dashboard-area ptb-100">
    <div class="container">
      <div class="recruit-container">
        <el-row :gutter="16" class="recruit-row">

          <el-col :span="12" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">岗位地点：</el-text>
            <el-cascader :options="location" @change="locaSelectChange" popper-class="custom-cascader-menu"
                         class="recruit-cascader" :style="{width: '500px'}">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-col>

          <el-col :span="12" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">岗位大类：</el-text>
            <el-cascader :options="options" @change="onSelectChange" popper-class="custom-cascader-menu"
                         class="recruit-cascader" :style="{width: '500px'}">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-col>
        </el-row>


        <el-row :gutter="16" class="recruit-row">

          <el-col :span="12" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">职位身份：</el-text>
            <el-cascader :options="role" @change="roleSelectChange" popper-class="custom-cascader-menu"
                         class="recruit-cascader" :style="{width: '500px'}">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-col>


            <el-col :span="10" class="recruit-col">
              <el-text class="mx-1 recruit-text" type="primary" size="large">岗位名称：</el-text>
              <el-input v-model="job_name" style="width: 100%" size="large" placeholder="请输入岗位名称"
                        class="recruit-input"/>
            </el-col>

        </el-row>



        <el-row :gutter="16" class="recruit-row">

          <el-col :span="11" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">学历要求：</el-text>
            <el-radio-group v-model="radio2" size="large">
              <el-radio-button label="学历不限" value="学历不限"/>
              <el-radio-button label="中专/中技" value="中专/中技"/>
              <el-radio-button label="大专" value="大专"/>
              <el-radio-button label="本科" value="本科"/>
              <el-radio-button label="硕士" value="硕士"/>
              <el-radio-button label="博士" value="博士"/>
            </el-radio-group>
          </el-col>

          <el-col :span="11" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">经验要求：</el-text>
            <el-radio-group v-model="radio1" size="large">
              <el-radio-button label="经验不限" value="0"/>
              <el-radio-button label="1年以上" value="1"/>
              <el-radio-button label="3年以上" value="3"/>
              <el-radio-button label="5年以上" value="5"/>
              <el-radio-button label="10年以上" value="10"/>
            </el-radio-group>
          </el-col>

        </el-row>


        <el-row :span="20" justify="space-between" class="recruit-row">
          <el-col :span="20" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">岗位描述：</el-text>
            <el-input
                v-model="job_textarea"
                :rows="5"
                type="textarea"
                placeholder="填写岗位描述"
                class="recruit-input recruit-input-textarea"
            />
          </el-col>
        </el-row>


        <el-row :span="20" class="recruit-row recruit-submit-row">
          <el-col :span="10" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">薪资范围（月薪）：</el-text>
            <el-input v-model="job_salaryMouth" style="width: 100%" size="large" placeholder="请输入薪资范围，?-?K"
                      class="recruit-input"/>
          </el-col>
          <el-col :span="10">
            <el-button type="primary" size="large" @click="submitJob" class="recruit-submit-button">提交岗位</el-button>
          </el-col>
        </el-row>


        <el-row :span="20" class="recruit-row recruit-submit-row">
          <el-col :span="10" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="primary" size="large">岗位年薪（K）：</el-text>
            <el-input v-model="input" style="width: 100%" size="large" placeholder="请输入岗位年薪"
                      class="recruit-input"/>
          </el-col>
          <el-col :span="10" class="recruit-col">
            <el-button type="primary" size="large" @click="submitForm" class="recruit-submit-button">查询薪资情况
            </el-button>
          </el-col>

        </el-row>



        <el-row :span="24" class="recruit-row recruit-submit-row">

          <el-col :span="6" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="warning" size="large">{{ mouthsalary }}</el-text>
          </el-col>
          <el-col :span="6" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="success" size="large">{{ tagContent1 }}</el-text>
          </el-col>
          <el-col :span="6" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="success" size="large">{{ tagContent2 }}</el-text>
          </el-col>
          <el-col :span="6" class="recruit-col">
            <el-text class="mx-1 recruit-text" type="success" size="large">{{ tagContent3 }}</el-text>
          </el-col>
        </el-row>

        <el-row justify="space-between" class="recruit-row">
          <div id="main_line" style="width:100%;height: 450px"></div>
        </el-row>

      </div>
    </div>
  </section>


  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>
              铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.0.
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->

</template>

<script lang="ts" setup>
import {ref} from "vue";
import {recruitAnalysis, insertJob} from "@/api/analysis";
import {recruit_line} from "@/view/analysis/analysis_echarts/Line";
import {getCompanyPersonalInfoService, getUserInfoService, getUserPersonalInfoService} from "@/api/user.js";
import {ElMessage} from 'element-plus'
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
let tagContent1 = ref('')
let tagContent2 = ref('')
let tagContent3 = ref('')
let mouthsalary = ref('')
const radio1 = ref('')
const radio2 = ref('')
const input = ref('')
const job_name = ref('')
const job_textarea = ref('')
const job_salaryMouth = ref('')
const location = ref([
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'shanghai',
        label: '上海',
      },

    ],
  },
  {
    value: '江苏',
    label: '江苏',
    children: [
      {
        value: '南京',
        label: '南京',
      },

    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '深圳',
        label: '深圳',
      },

    ],
  },
]);
const role = ref([
  {
    value: '0',
    label: '开发工程师',
  },
  {
    value: '1',
    label: '架构师',
  },
  {
    value: '2',
    label: '团队负责人',
  },

]);
const options = ref([
  {
    value: 'houduan',
    label: '后端',
    children: [
      {
        value: 'java',
        label: 'java',
      },
      {
        value: 'C',
        label: 'C',
      },
    ],
  },
  {
    value: 'qianduan',
    label: '前端',
    children: [
      {
        value: '前端',
        label: '前端工程师',
      },
    ]
  },
  {
    value: '算法',
    label: '算法',
    children: [
      {
        value: '算法工程师',
        label: '算法工程师',
      },
    ]
  },
]);
// 定义状态变量来保存选择的值

//获取用户信息
const userInfo2 = ref({})

async function getUserInfo2(){
  let res = await getUserInfoService()
  userInfo2.value = res.data
}

getUserInfo2();

const searchForm = ref({
  tags: '',
  location: '',
  experience: '',
  degree: '',
  role: '',
  jobSalaryYear: ''
});
const userInfo = ref({
  name: '张三',
  companyId: '',
  birthdate: '1995-04-12',
  degree: '硕士',
  school: '北京大学',
  specialized: '计算机科学与技术',
  intention: '前端开发工程师',
  skills: 'JavaScript, Vue.js, React, Node.js, HTML, CSS',
  projects: '个人博客网站, 电商后台管理系统, 交互式数据分析平台',
  phone: '13800138000',
  location: '',
  experiment: '1-3年'
})
const jobDetails = ref({
  jobId: '',
  location: '',
  hr: '',
  tags: '',
  degree: '硕士',
  name: '',
  salary: '',
  companyId: 0,
  description: '',
  role: '',
  experiment: '',
  experimentStr: ''
})

// async function getUserInfo() {
//   let res = await getUserPersonalInfoService()
//   alert(res.data.user.companyId)
//   userInfo.value = res.data.resume
//   userInfo.value.companyId = res.data.user.companyId
//   jobDetails.value.hr = userInfo.value.name
//   jobDetails.value.companyId = userInfo.value.companyId
//
// }
//
// getUserInfo()

const submitJob = async () => {
  let res = await getUserPersonalInfoService()
  jobDetails.value.hr = res.data.user.username
  jobDetails.value.companyId = res.data.user.companyId


  jobDetails.value.location = searchForm.value.location
  jobDetails.value.tags = searchForm.value.tags
  jobDetails.value.name = job_name.value
  jobDetails.value.salary = job_salaryMouth.value
  jobDetails.value.description = job_textarea.value
  jobDetails.value.role = searchForm.value.role
  jobDetails.value.experiment = radio1.value
  jobDetails.value.degree = radio2.value

  insertJob(jobDetails.value)
  ElMessage({
    message: '提交成功',
    type: 'success',
  })

  router.push('/CompanyPersonalPage')


}
const submitForm = () => {

  // 获取单选组的值
  const selectedRadio1 = radio1.value;
  const selectedRadio2 = radio2.value;

  // 将获取的值赋给searchForm对象的相应属性
  searchForm.value.experience = selectedRadio1; // 假设selectedRadio1对应experience
  searchForm.value.degree = selectedRadio2; // 假设selectedRadio2对应degree
  searchForm.value.jobSalaryYear = input.value;

  searchJobs()
  console.log(searchForm.value)
};

async function searchJobs() {

  let result = await recruitAnalysis(searchForm.value);
  const SalaryYear=searchForm.value.jobSalaryYear
  const roleList = result.data.roleList
  const rank = result.data.rank
  const roleListNum = result.data.roleListNum
  roleList.sort((a, b) => a.salaryYear - b.salaryYear);
  const salaryYears = roleList.map(item => item.salaryYear);
  const jobId = roleList.map(item => item.jobId);
  // 计算 salaryYears 的平均值
  const averageSalary = salaryYears.reduce((accumulator, currentValue) => accumulator + currentValue, 0) / salaryYears.length;
  const pre_rank = (rank * 1.0 / roleListNum) * 100
  const pre_rank_100 = pre_rank.toFixed(2);
  recruit_line(salaryYears, jobId, averageSalary, pre_rank_100, roleListNum);

  // 计算四分位数
  const q1Index = Math.floor((salaryYears.length / 4));
  const q2Index = Math.floor((salaryYears.length / 2));
  const q3Index = Math.floor((3 * salaryYears.length) / 4);


  const Q1 = salaryYears[q1Index];
  const Q2 = salaryYears[q2Index];
  const Q3 = salaryYears[q3Index];
  const Salarymouth=SalaryYear/12


  tagContent1.value = "岗位中排75%的薪资" + Q1 + "K。"
  tagContent2.value = "岗位中排50%的薪资" + Q2 + "K。"
  tagContent3.value = "岗位排25%的薪资" + Q3 + "K。"
  mouthsalary.value = "计算得到最低月薪为"+Salarymouth+"K。"


  console.log(roleList)
}

const locaSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    searchForm.value.location = findSecondLevelLabel(location.value);

  }
};
const onSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    searchForm.value.tags = findSecondLevelLabel(options.value);

  }
};

const roleSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 1) {
    // 直接获取并设置一级菜单的值
    searchForm.value.role = selectedValues[0];
  }
};

</script>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";


.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.recruit-container {
  padding: 24px;
  border: 1px solid #3f9dfd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* 添加Flexbox布局并居中内容 */
  display: flex;
  flex-direction: column; /* 默认为列布局，以适应已有结构 */
  max-height: 1200px;
}

.recruit-row {
  margin-bottom: 16px; /* 行间距 */

}

.recruit-col {
  padding: 8px 0; /* 列内间距 */
}

.recruit-text {
  font-weight: bold; /* 文本加粗 */
  width: 100px;
}

.recruit-cascader .el-cascader-node__label {
  color: #409eff !important; /* 改变Cascader标签颜色 */
}

.recruit-radio-group .el-radio-button__inner {
  border-color: #dcdfe6; /* 改变Radio按钮边框颜色 */
  background-color: #f5f7fa; /* 改变Radio按钮背景色 */
}

.recruit-input {
  width: 505px;
  box-sizing: border-box;
}

.recruit-submit-button {
  width: 150px;
  height: 40px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  margin-left: 16px; /* 提交按钮的左边距 */
  margin-top: 20px; /* 提交按钮的顶部间距 */
}

.recruit-submit-row {
  margin-top: 24px; /* 提交按钮行的上间距 */
}

.recruit-chart {
  width: 100%;
  height: 450px;
  margin-top: 24px; /* 图表容器的上间距 */
}

.recruit-cascader {
  width: 500px;
}

.recruit-input-textarea {
  width: 100%; /* 使其占据父元素的全宽 */
  max-width: 1200px; /* 设置最大宽度以限制过宽的情况 */
}
</style>
